<template>
  <div>
    <h1>参数配置</h1>

    <table>
      <tr v-for="(i,index) in list" :key="i.id">
        <td>
          <van-field :label="i.label" v-model="names[index]"/>
        </td>
        <td>
          <select name="" id="" v-model="typevalues[index]">
            <option value="input">输入框</option>
            <option value="radio">单选框</option>
            <option value="checkbox">多选框</option>
            <option value="select">下拉框</option>
            <option value="datetime">日期</option>
            <option value="file">文件</option>
          </select>
        </td>
        <td>
          <van-field lable="值" v-model="values[index]"/>
          <van-button @click="get_resource(index)">选择数据源</van-button>
        </td>
      </tr>
    </table>
    <van-button @click="add">+</van-button>
    <van-button @click="submit">提交</van-button>

    <el-dialog v-model="dialogTableVisible" title="Shipping address">
      <el-table
          ref="singleTable"
          :data="tableData"
          highlight-current-row
          style="width: 100%"
          @current-change="handleCurrentChange"
      >
        <el-table-column type="index" width="50"/>

        <el-table-column property="name" label="Name" width="120"/>

      </el-table>

    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "parameter",
  data() {
    return {
      list: [{'label': '名称'}],
      names: {},
      typevalues: {},
      values: {},
      dialogTableVisible: false,
      gridData: [{'id': 1, 'name': '请假类型数据源'}, {'id': 2, 'name': '会议地址数据源'}],
      tableData: [],
      id: this.$route.query.id
    }
  },
  methods: {
    add() {
      this.list.push({'label': '名称'})
    },
    submit() {
      //获取输入的所有值
      let alist = []
      for (var i = 0; i < this.list.length; i++) {
        alert('成功')
        let dict = {
          'lable': this.names[i], 'type': this.typevalues[i],
          'values': this.values[i]
        }
        alist.push(dict)
      }
      console.log(alist)
    },
    // 添加数据源
    get_resource(index) {
      localStorage.setItem('index', index)
      this.myaxios('http://127.0.0.1:5000/getdataresource', 'get')
          .then(res => {
            this.tableData = res.list
          })
      this.dialogTableVisible = true
    },
    handleCurrentChange(val) {
      this.dialogTableVisible=false
      let index = localStorage.getItem('index')
      this.values[index] = JSON.stringify(val['mes'])
    }
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>
